<template>
    <div>
        <ul>
            <li
              v-for="(item, index) in handlecities"
              :key="index"
              class="customlist">
                <el-checkbox
                  :indeterminate="item.isIndeterminate"
                  v-model="item.checked"
                  @change="handleCheckAllChange(index, $event)"
                >{{item.name}}</el-checkbox>
                <!-- <div style="margin: 15px 0;"></div> -->
                <p>
                    <el-checkbox
                      v-for="(items , i) in item.list"
                      v-model="items.checked"
                      :label="items.name"
                      :key="i"
                      @change="handleCheckedCitiesChange(index, items.sobId, $event)"
                  >{{items.name}}</el-checkbox>
                </p>
            </li>
        </ul>
    </div>
</template>
<script lang="ts">
import Vue from 'vue'
interface Sitiess{
    name: string
    list: {
        name: string
        sobId: string
    }[]
}
export default Vue.extend({
  data () {
    return {
      cities: [
        {
          name: 'a1',
          list: [
            { name: '上海', sobId: '1' },
            { name: '北京', sobId: '2' },
            { name: '广州', sobId: '3' },
            { name: '深圳', sobId: '4' }]
        },
        {
          name: 'a2',
          list: [
            { name: '上海1', sobId: '5' },
            { name: '北京1', sobId: '6' },
            { name: '广州1', sobId: '7' },
            { name: '深圳1', sobId: '8' }]
        }
      ]
      // isIndeterminate: true
    }
  },
  methods: {
    // 全选反选的多选框
    handleCheckAllChange (index:any, e:any) {
      (this.cities[index] as any).checked = e
      if (e === false) (this.cities[index] as any).isIndeterminate = false
      var childrenArray = this.cities[index].list
      //  console.log(childrenArray)
      if (childrenArray) {
        for (var i = 0, len = childrenArray.length; i < len; i++) { (childrenArray[i] as any).checked = e }
      }
    },
    handleCheckedCitiesChange (index:any, sobId:any, e:any) {
      var childrenArray = this.cities[index].list
      console.log(childrenArray)
      var tickCount = 0; var unTickCount = 0; var len = childrenArray.length
      for (var i = 0; i < len; i++) {
        if (sobId === childrenArray[i].sobId) (childrenArray[i] as any).checked = e
        if ((childrenArray[i] as any).checked === true) tickCount++
        if ((childrenArray[i] as any).checked === false) unTickCount++
      }
      if (tickCount === len) { // 二级全勾选
        (this.cities[index] as any).checked = true;
        (this.cities[index] as any).isIndeterminate = false
      } else if (unTickCount === len) { // 二级全不勾选
        (this.cities[index] as any).checked = false;
        (this.cities[index] as any).isIndeterminate = false
      } else {
        (this.cities[index] as any).checked = false;
        (this.cities[index] as any).isIndeterminate = true // 添加一级不确定状态
      }
    },
    // 给返回的数据加是否选中的属性
    format (items:any) {
      return items.map((item :any) => {
        const result = { ...item, checked: false, isIndeterminate: false }
        if (item.list) {
          result.list = this.format(item.list)
        }
        return result
      })
    }
  },
  computed: {
    handlecities ():Sitiess[] {
      return (this.cities as Sitiess[]).filter((item:Sitiess):boolean => item.list.length !== 0)
    }
  },
  mounted () {
    this.cities = this.format(this.cities)
  }
})
</script>
